<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>键值参数</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

		<link rel="stylesheet" type="text/css" href="/static/manage/common/bootstrap/js/bootstarp-3.3.7/css/bootstrap.min.css" />
		<script src="/static/manage/common/bootstrap/js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/bootstarp-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table.min.css" />
		<script src="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/manage/common/bootstrap/js/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			//转换日期格式(时间戳转换为datetime格式)
			function changeDateFormat(cellval) {
				var dateVal = cellval + "";
				if(cellval != null) {
					var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
					var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
					var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

					var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
					var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
					var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

					return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
				}
			}

			function chaxun() {
				//alert($("#role_name").val())
				$("#table").bootstrapTable('refresh');
			}

			//添加按钮
			function add() {
				$("#myModal").modal("show")
			}
		</script>

		<body>
			<form class="form-inline" method="get">
				<div class="form-group">
					<label for="exampleInputName2">参数名称：</label>
					<input type="text" class="form-control" id="param_name" name="param_name" placeholder="请输入参数名称">
				</div>
				<div class="form-group">
					<label for="exampleInputName2">参数键：</label>
					<input type="text" class="form-control" id="param_key" name="param_key" placeholder="请输入参数键">
				</div>
				<button type="button" class="btn btn-success" onclick="chaxun()"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询</button>
				<button type="reset" class="btn btn-primary"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>重置</button> </form>

			<div>
				<table id="table">
					<div class="inline">
						<button id="add" onclick="add()" type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus" style="color: green;" aria-hidden="true"></span>新增</button>
						<button id="upd" onclick="upd()" type="button" class="btn btn-default"><span class="glyphicon glyphicon-pencil" style="color: green;" aria-hidden="true"></span>修改</button>
						<button id="del" onclick="del()" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</button>
					</div>
				</table>
			</div>

			<script type="text/javascript">
				$(function() {

					//alert("json");

					//1.初始化Table

					var oTable = new TableInit();

					oTable.Init();

					var message = document.getElementById("message").value;

					if(message != null && message != "") {

						alert(message);

					}
				});

				var TableInit = function() {
					var oTableInit = new Object();
					//初始化Table
					oTableInit.Init = function() {

						$('#table').bootstrapTable({

							method: 'get',

							contentType: "application/x-www-form-urlencoded",

							url: "/sysparam/findParam", //请求后台的URL（*）

							striped: true, //是否显示行间隔色

							locale: 'zh-CN', //中文支持

							pagination: true, //是否开启分页（*）

							pageNumber: 1, //初始化加载第一页，默认第一页

							pageSize: 5, //每页的记录行数（*）

							pageList: [5, 7, 9], //可供选择的每页的行数（*）

							sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）

							showRefresh: true, //刷新按钮

							queryParams: oTableInit.queryParams, //传递参数（*）

							strictSearch: true,

							showColumns: true, //是否显示所有的列

							showRefresh: true, //是否显示刷新按钮

							minimumCountColumns: 2, //最少允许的列数

							clickToSelect: true, //是否启用点击选中行

							uniqueId: "project_id", //每一行的唯一标识，一般为主键列

							columns: [{
									title: '<input type="checkbox" id="all" onclick="checkAll()"/>',
									align: 'center',
									width: '40',
									formatter: function(value, row, index) {
										return '<input name="che" type="checkbox" value="' + row.param_id + '"/>'
									}
								}, {
									field: 'param_name',
									title: '参数名称',
									align: 'center',
								}, {
									field: 'param_key',
									title: '参数键',
									align: 'center',
								}, {
									field: 'param_value',
									title: '参数键',
									align: 'center',
								}, {
									field: 'param_remark',
									title: '备注',
									align: 'center',
								}, {
									field: 'sysCatalog.catalog_name',
									title: '所属分类',
									align: 'center',
								},
								{
									field: 'edit_mode',
									title: '编辑模式',
									align: 'center',
									formatter: function(v, r, i) {
										switch(Number(v)) {
											case 0:
												return "只读";
												break;
											case 1:
												return "可编辑";
												break;
										}
									}
								},
								{
									field: 'status',
									title: '当前状态',
									align: 'center',
									formatter: function(v, r, i) {
										switch(Number(v)) {
											case 0:
												return "停用";
												break;
											case 1:
												return "启用";
												break;
										}
									}
								}
							]

						});

					};

					//得到查询的参数

					oTableInit.queryParams = function(params) {

						var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

							limit: params.limit, //页面大小

							offset: params.offset, //偏移量
							pageSize: params.limit,

							param_name: $("#param_name").val(),

							param_key: $("#param_key").val(),

							title: $("#PROTOCOL_NAME").val(),

							startTime: $("#startTime").val(),

							endTime: $("#endTime").val(),

							brand: $("#PROTOCOL_STATUS").val(),

							important: $("#PROTOCOL_TYPE").val()
						};
						return temp;
					};
					return oTableInit;
				};
				
				$(function () {
					//catalog_id下拉框
					$.ajax({
						type: "get",
						url: "/sys/findCatalogs",
						dataType: 'json',
						success: function(data) {

							$.each(data, function(index, data) {
								$("#cat").append("<option value='" + data.catalog_id + "'>" + data.catalog_name + "</option>")
								$("#cat1").append("<option value='" + data.catalog_id + "'>" + data.catalog_name + "</option>")
							});
						}
					});
				})
				

				function checkAll() {
					var allche = document.getElementById("all");
					var ches = document.getElementsByName("che");
					for(i = 0; i < ches.length; i++) {
						ches[i].checked = allche.checked;
					}
				}

				function findIds(ename) {

					arr = document.getElementsByName(ename);
					ids = [];
					for(k in arr) {
						if(arr[k].checked)
							ids.push(arr[k].value);
					}
					return ids;
				}

				//删除
				function del() {

					if(findIds("che").length != 0) {
						$.ajax({
							type: "get",
							url: "/sysparam/delParams?param_id=" + findIds("che"),
							async: true,
							success: function(data) {
								if(data != 0) {
									alert("删除成功！！！")
									$("#table").bootstrapTable('refresh');
								} else {
									alert("删除失败！！！")
								}
							}
						});

					} else {
						alert("亲，请先选择你要删除的数据！！！")
					}
				}

				//添加参数
				function addParam() {

					$.ajax({
						type: "post",
						url: "/sysparam/addParam",
						data: $("#addForm").serialize(),
						success: function(msg) {
							if(msg != 0) {
								alert("添加成功！！")
								$("#myModal").modal("hide")
								$("#t").bootstrapTable('refresh')
							} else {
								alert("添加失败！！")
							}
						}
					});
				}

				//修改按钮
				function upd() {
					
					if(findIds("che").length == 0 || findIds("che").length > 1) {
						alert("亲，选择有误，请选择一条数据进行修改")

					} else {
						$.ajax({
							type: "post",
							url: "/sysparam/findParamById?param_id=" + findIds("che"),
							async: true,
							success: function(data) {
								$("#myModal1").modal("show");

								$("#pid").val(data.param_id);
								$("#param_name1").val(data.param_name);
								$("#status1").val(data.status);
								$("#key").val(data.param_key);
								$("#param_value1").val(data.param_value);
								$("#edit_mode1").val(data.edit_mode);
								$("#cat1").val(data.catalog_id);
								$("#catalog_cascade_id1").val(data.catalog_cascade_id);
								$("#param_remark1").val(data.param_remark);
							}
						});
					}

				}

				//修改参数
				function updParam() {

					$.ajax({
						type: "post",
						url: "/sysparam/updParam",
						data: $("#updForm").serialize(),
						success: function(msg) {
							if(msg != 0) {
								alert("修改成功！！")
								$("#myModal1").modal("hide")
								$("#table").bootstrapTable('refresh')
							} else {
								alert("修改失败！！")
							}
						}
					});
				}
			</script>

			<!--添加的模态框-->
			<!-- Modal -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document" style="width: 1000px; height: 1500px;">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">新增参数</h4>
						</div>
						<div class="modal-body">

							<!--添加form表单-->
							<form id="addForm">
								<div class="modal-body">
									<div class="form-group">
										<!--角色名称-->
										<label for="param_name" class="col-sm-3 control-label">参数名称:</label>
										<div class="col-sm-3">
											<input type="text" class="form-control" name="param_name">
										</div>
										<label for="status" class="col-sm-3 control-label">当前状态:</label>
										<div class="col-sm-3">
											<select class="form-control" name="status">
												<option value="0">禁用</option>
												<option value="1">启用</option>
											</select>
										</div>
									</div>
								</div>

								<div class="modal-body">
									<div class="form-group">
										<label for="param_key" class="col-sm-3 control-label">参数键名:</label>
										<div class="col-sm-3">
											<input type="text" class="form-control" name="param_key">
										</div>
										<label for="param_value" class="col-sm-3 control-label">参数键值:</label>
										<div class="col-sm-3">
											<input type="text" class="form-control" name="param_value">
										</div>
									</div>
								</div>

								<div class="modal-body">
									<div class="form-group">
										<label for="edit_mode" class="col-sm-3 control-label">编辑模式：</label>
										<div class="col-sm-3">
											<select class="form-control" name="edit_mode">
												<option value="0">只读</option>
												<option value="1">可编辑</option>
											</select>
										</div>
										<label for="catalog_id" class="col-sm-3 control-label">目录ID：</label>
										<div class="col-sm-3">
											<select class="form-control" id="cat" name="catalog_id">

											</select>
										</div>
									</div>
								</div>

								<!-- 	<div class="modal-body">
								<div class="form-group">
									<label for="catalog_cascade_id" class="col-sm-3 control-label">分类科目语义ID：</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" name="catalog_cascade_id" placeholder="catalog_cascade_id">
									</div>
								</div>
							</div> -->

								<div class="modal-body">
									<div class="form-group">
										<label for="param_remark" class="col-sm-3 control-label">参数备注:</label>
										<div class="col-sm-7">
											<textarea class="form-control" name="param_remark" rows="2"></textarea>
										</div>
									</div>
								</div>
							</form>

						</div>
						<div>
							<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
							<button type="button" id="r" class="btn btn-primary" onclick="addParam()">Add</button>
						</div>
					</div>
				</div>
			</div>

			<!--修改的模态框-->
			<!-- Modal -->
			<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document" style="width: 1000px; height: 1500px;">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">修改参数</h4>
						</div>
						<div class="modal-body">

							<!--修改form表单-->
							<form id="updForm">
								<input type="hidden" id="pid" name="param_id" />
								<div class="modal-body">
									<div class="form-group">
										<!--参数名称-->
										<label for="param_name" class="col-sm-3 control-label">参数名称:</label>
										<div class="col-sm-3">
											<input type="text" class="form-control" id="param_name1" name="param_name" placeholder="Param_name">
										</div>
										<label for="status" class="col-sm-3 control-label">当前状态:</label>
										<div class="col-sm-3">
											<select class="form-control" id="status1" name="status">
												<option value="0">禁用</option>
												<option value="1">启用</option>
											</select>
										</div>
									</div>
								</div>

								<div class="modal-body">
									<div class="form-group">
										<label for="param_key" class="col-sm-3 control-label">参数键名:</label>
										<div class="col-sm-3">
											<input type="text" class="form-control" id="key" name="param_key" placeholder="Param_key">
										</div>
										<label for="param_value" class="col-sm-3 control-label">参数键值:</label>
										<div class="col-sm-3">
											<input type="text" class="form-control" id="param_value1" name="param_value" placeholder="Param_value">
										</div>
									</div>
								</div>

								<div class="modal-body">
									<div class="form-group">
										<label for="edit_mode" class="col-sm-3 control-label">编辑模式：</label>
										<div class="col-sm-3">
											<select class="form-control" id="edit_mode1" name="edit_mode">
												<option value="0">只读</option>
												<option value="1">可编辑</option>
											</select>
										</div>
										<label for="catalog_id" class="col-sm-3 control-label">目录ID：</label>
										<div class="col-sm-3">
											<select class="form-control" id="cat1" name="catalog_id">

											</select>
										</div>
									</div>
								</div>

								<div class="modal-body">
									<div class="form-group">
										<label for="catalog_cascade_id" class="col-sm-3 control-label">分类科目语义ID：</label>
										<div class="col-sm-3">
											<input type="text" class="form-control" id="catalog_cascade_id1" name="catalog_cascade_id" placeholder="catalog_cascade_id">
										</div>
									</div>
								</div>

								<div class="modal-body">
									<div class="form-group">
										<label for="param_remark" class="col-sm-3 control-label">参数备注:</label>
										<div class="col-sm-7">
											<textarea class="form-control" id="param_remark1" name="param_remark" rows="2"></textarea>
										</div>
									</div>
								</div>
							</form>

						</div>
						<div>
							<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
							<button type="button" id="r" class="btn btn-primary" onclick="updParam()">Update</button>
						</div>
					</div>
				</div>
			</div>
		</body>

</html>